TNotes.javascript

Appearance

⏰0111. script 元素的 type 属性

0111. script 元素的 type 属性 ​

1. 📒 type 属性 ​

  • <script> 标签的 type 属性用于指定加载或内嵌的脚本语言的 MIME 类型。
  • 在 HTML 中使用 <script> 标签时，这个属性可以帮助浏览器理解和处理正确的脚本类型。

以下是一些关于 type 属性的重要点和常见用法：

  • 标准用法 - text/javascript: 这是最常用的值，用于 JavaScript 代码。根据 HTML5 的标准，如果不指定 type 属性，浏览器默认处理为 text/javascript。因此，在大多数现代网页中，你通常会看到省略 type 属性的 <script> 标签。
  • 模块 - module: 随着 ES6 模块的引入，如果你想在浏览器中直接使用模块功能（如 import 和 export 语句），可以将 type 设置为 module。这样的脚本会被当作 ECMAScript 模块处理。
html
<script type="module">
  import { functionName } from './module.js';
  functionName();
</script>
  • 非 JavaScript 类型 - 其他 MIME 类型: 如果 type 设置为非 text/javascript 的其他值，如 text/plain 或自定义类型，浏览器不会执行这些脚本，这可以用于内嵌数据或在 JavaScript 库或应用中延迟处理的脚本。
  • 非 JavaScript 类型 - text/babel: 这是社区中的一种约定，用于表示脚本内容是用 Babel 编写的 JSX 或 ES6+ 代码，需要在浏览器中动态编译。通常与 Babel 的浏览器版本一起使用，以允许在客户端动态编译 JSX 或最新的 JavaScript 特性。
  • 历史用法：在早期的 HTML 版本中，type 属性曾用来区分不同的脚本语言，如 text/vbscript。但随着 JavaScript 成为 Web 开发的标准，其他脚本语言的使用逐渐减少。
  • 实际应用
    • 在开发中，正确使用 type 属性可以控制脚本的解析和执行，特别是在使用现代 JavaScript 框架和工具（如模块化或 Babel）时。
    • 使用 type="module" 还可以提供一些额外好处，比如自动严格模式、更好的浏览器缓存处理和跨域脚本的支持。
      • 在 react v19 中，可以直接采用 esm 的形式来引入 react，此时就需要给 script 标签加上 type="module"。
    • 通过合理使用 <script> 标签的 type 属性，可以更有效地管理和部署 Web 页面上的脚本，提高页面的兼容性和性能。